<template>
  <el-form class="form-content" ref="formRef" :model="formData" :rules="rules" label-width="120px">
    <el-form-item label="审核人员">
      <div class="switch">
        <el-switch v-model="formData.state" :active-value="2" :inactive-value="1" />
        <div class="switch_msk" @click="onStateOff"></div>
      </div>
    </el-form-item>
    <el-form-item label="审核员工" prop="audit_ids">
      <div class="form-staffs">
        <div class="staffs">
          <el-tag v-for="item in employeeList" :key="item.name" class="staffs_item" :closable="true" @close="handleClose(item)" :type="item.id">
            {{ item.name }}
          </el-tag>
        </div>
      </div>
      <div class="audit_ids">
        <span> <el-button  @click="openDepart">选择员工</el-button></span> <span class="audit_desc">订单将会平均分配给审核人员</span>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(formRef)">保存</el-button>
    </el-form-item>
  </el-form>
  <ZWDepart ref="DepartRef" @submit="getDepart" />
  <ZWDeletdialog ref="DeletdialogRef" @submit="onDialogSubmit" />
</template>
<script lang="ts" setup>
  import ZWDepart from '@/components/ZWDepart.vue'
  import ZWDeletdialog from '@/components/ZWDeletdialog.vue'
  import { getOrderAuditInfo, orderAuditUpdate } from '@/api/salesleads/ordermanagement/orderlist'
  import { getSetionId } from '@/utils/utils'
  import type { FormInstance, FormRules } from 'element-plus'
  import { ElMessage } from 'element-plus'
  import { reactive, ref, onMounted } from 'vue'
  const DeletdialogRef: any = ref(null)
  const DepartRef = ref<any>() // 部门弹框类型
  const formRef = ref<FormInstance>()
  const formData: any = reactive({
    id: '',
    state: 2,
    audit_ids: []
  })
  const looktype: any = ref(true)
  const rules = reactive<FormRules>({
    audit_ids: [{ required: true, message: '请选择审核员工', trigger: 'change' }]
  })
  // 选择员工
  const employeeList = ref<any>([])
  const openDepart = () => {
    DepartRef.value.departVisble = true
    DepartRef.value.selectedMember = [...employeeList.value]
  }
  const getDepart = (res: any) => {
    employeeList.value = res
    console.log(res)
    formData.audit_ids = getSetionId('id', employeeList.value)
  }
  const handleClose = (tag: any) => {
    employeeList.value = employeeList.value.filter((item: any) => item.id !== tag.id)
    formData.audit_ids = getSetionId('id', employeeList.value)
    DepartRef.value.removeItem(tag)
  }
  const onStateOff = () => {
    if (formData.state == 2) {
      DeletdialogRef.value.appDialog.title = '审核关闭提醒'
      DeletdialogRef.value.content = '关闭时，已提交审核的订单将会自动审核通过。您确定要关闭吗？'
      DeletdialogRef.value.appDialog.visible = true
    } else {
      formData.state = 2
    }
  }
  const onDialogSubmit = () => {
    formData.state = 1
  }

  const getInfo = () => {
    getOrderAuditInfo().then((res: any) => {
      console.log(res)
      formData.state = res.state
      formData.audit_ids = res.audit_ids
      employeeList.value = res.audit_info.map((item: any) => ({ ...item, check: true, type: 'user' }))
    })
  }
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid: any, fields: any) => {
      if (valid) {
        console.log('submit!')
        orderAuditUpdate(formData).then((res: any) => {
          getInfo()
          ElMessage.success('保存成功')
        })
      }
    })
  }
  onMounted(() => {
    getInfo()
  })
</script>

<style lang="scss" scoped>
  .switch {
    position: relative;
    .switch_msk {
      width: 42px;
      height: 22px;
      position: absolute;
      top: 10px;
      cursor: pointer;
    }
  }
  // 员工选择
  .form-staffs {
    display: flex;

    .title {
      margin-right: 12px;
    }

    .staffs {
      &_item {
        height: 22px;
        line-height: 22px;
        margin-right: 6px;
        // padding: 0;
        color: #35383a;
        border: 1px solid #fffaf9;
        border-radius: 1px 1px 1px 1px;
        background: #fffaf9;
      }

      :deep .el-tag .el-icon {
        width: 12px;
        height: 12px;
        color: #ffffff;
        background: #d9d9d9;
      }

      :deep .el-tag .el-icon svg {
        margin: 0px;
      }

      :deep .el-tag .el-tag__close:hover {
        background: #d9d9d9;
      }

      :deep span.el-tag.el-tag--light.staffs_item:before {
        content: '';
        display: inline-block;
        width: 10px;
        height: 11px;
        background: url('@/assets/image/LiveCode/people_icon.png') center/100% no-repeat;
        margin-right: 10px;
      }
    }
  }
  .audit_ids {
    display: flex;
    align-items: center;
    .audit_desc {
      margin-left: 10px;
      font-size: 12px;
      color: #969696;
    }
  }
  .form-content {
    // max-height: calc(100vh - 286px);
    height: calc(100vh - 266px);
    overflow-y: auto;
  }
</style>
